<template>
  <div>
    <a-tabs @change="getData" v-model="type">
      <a-tab-pane tab="买家信用" key="2" forceRender></a-tab-pane>
      <a-tab-pane tab="卖家信用" key="1"></a-tab-pane>
    </a-tabs>
    <a-row class="box2">
      <a-row type="flex" justify="space-between" class="box2-t">
        <a-col :span="5">信用特权</a-col>
        <a-col :span="3"></a-col>
      </a-row>
      <a-row class="box2-b">
        <div>
          <a-row type="flex">
            <a-col :span="8">会员级别</a-col>
            <a-col :span="8">信用值</a-col>
          </a-row>
          <a-row type="flex" v-for="(item,index) in list" :key="index" style="margin-top:10px;">
            <a-col :span="8" v-if="type==2">
              <div v-if="item.name < 6">
                <img v-for="(items,indexs) in  item.name" :key="indexs" src="~/static/a_Star.png" />
              </div>
              <div v-if="item.name < 11 && item.name >= 6">
                <img
                  v-for="(items,indexs) in  item.name -5"
                  :key="indexs"
                  src="~/static/a_Diamond.png"
                />
              </div>
              <div v-if="item.name >= 11">
                <img
                  v-for="(items,indexs) in  item.name-10"
                  :key="indexs"
                  src="~/static/a_Crown.png"
                />
              </div>
            </a-col>
            <a-col :span="8" v-if="type==1">
              <div v-if="item.name < 6">
                <img v-for="(items,indexs) in  item.name" :key="indexs" src="~/static/b_Star.png" />
              </div>
              <div v-if="item.name < 11 && item.name >= 6">
                <img
                  v-for="(items,indexs) in  item.name -5"
                  :key="indexs"
                  src="~/static/b_Diamond.png"
                />
              </div>
              <div v-if="item.name >= 11">
                <img
                  v-for="(items,indexs) in  item.name-10"
                  :key="indexs"
                  src="~/static/b_Crown.png"
                />
              </div>
            </a-col>
            <a-col :span="8">{{item.stest}}-{{item.etest}}</a-col>
            <a-col
              :span="24"
              style="border-top:1px dashed #e8e8e8;margin-top:10px;"
              v-if="item.name == 5 || item.name == 10"
            ></a-col>
          </a-row>
        </div>
      </a-row>
    </a-row>
    <a-row class="box2">
      <a-row type="flex" justify="space-between" class="box2-t">
        <a-col :span="5">信用计算规则</a-col>
        <a-col :span="3"></a-col>
      </a-row>
      <a-row class="box2-b">
        <div v-for="(item,index) in test" :key="index">{{item.test}}</div>
      </a-row>
    </a-row>
  </div>
</template>

<script>
import { CREDIT_LIST } from "../server";
export default {
  layout: "main",
  data() {
    return {
      type: "2",
      list: [],
      test: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      CREDIT_LIST({ type: this.type }).then(res => {
        if (!res) return;
        res.data.list.forEach(ele => {
          ele.name = parseInt(ele.name);
        });
        this.list = res.data.list;
        this.test = res.data.test;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.box2 {
  margin-top: 20px;
  border: 1px solid #e8e8e8;

  .box2-t {
    height: 42px;
    line-height: 42px;
    background: #f6f6f6;
    border-bottom: 1px solid #e8e8e8;
    div:first-child {
      font-size: 16px;
      padding-left: 24px;
    }
    div:last-child {
      text-align: right;
      padding-right: 16px;
    }
  }
  .box2-b {
    padding: 10px;
  }
}
</style>